<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>对比工具</title>
    <script type="text/javascript" src="./js/jquery.min.js"></script>
    <script type="text/javascript" src="./js/codemirror.min.js"></script>
    <script type="text/javascript" src="./js/shell.js"></script>
    <script type="text/javascript" src="./js/diff_match_patch.js"></script>
    <script type="text/javascript" src="./js/merge.js"></script>
    <script type="text/javascript" src="./js/sublime.js"></script>
    <script type="text/javascript" src="./js/sweetalert2.js"></script>
    <link rel="stylesheet" type="text/css" href="./css/codemirror.min.css">
    <link rel="stylesheet" type="text/css" href="./css/merge.css">
    <link rel="stylesheet" type="text/css" href="./css/twilight.css">
    <link rel="stylesheet" type="text/css" href="./css/dracula.css">
    <link rel="stylesheet" type="text/css" href="./css/main.css">
</head>

<body>
    <div class="container">
        <div class="diffs">
            <nav>
                <ul>
                    <li><a href="./home">参数配置</a></li>
                    <li><a href="./crontab">定时设定</a></li>
                    <li class="active"><a href="./diff">对比工具</a></li>
                    <li><a href="./run">手动执行</a></li>
                    <li><a href="./log">日志查询</a></li>
                    <li><a href="./changepwd">修改密码</a></li>
                    <li><a href="./logout">退出</a></li>
                </ul>
            </nav>
            <header>
                <h1>在线对比合并工具</h1>
                <button id="prev" title="上一个差异">上一个差异</button>
                <button id="next" title="下一个差异">下一个差异</button>
                <button id="wrap" title="切换换行">切换换行</button>
                <button id="save" title="保存">保存 config.sh</button>
            </header>
            <h4>左侧为 config.sh ，右侧为 config.sh.sample</h4>
            <div class="compare-wrapper">
                <div id="compare">
                </div>
            </div>
            <div class="sources">
                <p>查看源文件，注意将浏览器编码切换为 UTF-8 。</p>
                <ul>
                    <li><a id="file1" target="_blank" href="./api/config/config">查看 config.sh</a></li>
                    <li><a id="file2" target="_blank" href="./api/config/sample">查看 config.sh.sample</a></li>
                </ul>
            </div>
        </div>
    </div>
    <script>
        $.ajaxSetup({ cache: false });

        var editor, origLeft, origRight;
        function initUI() {
            editor =  CodeMirror.MergeView(document.getElementById('compare'), {
                value: origLeft,
                origLeft: null,
                orig: origRight,
                lineNumbers: true,
                lineWrapping: false,
                mode: 'shell',
                theme: 'dracula',
                keyMap: 'sublime',
                lineNumbers: true,
                highlightDifferences: true,
                connect: null,
                collapseIdentical: false
            });
        }

        Promise.all([$.get('./api/config/config'), $.get('./api/config/sample')])
            .then((resArr) => {
                origLeft = resArr[0];
                origRight = resArr[1];

                initUI();
            });

        $('#prev').click(function () {
            editor.editor().execCommand('goPrevDiff');
        });

        $('#next').click(function () {
            editor.editor().execCommand('goNextDiff');
        });

        $('#wrap').click(function () {
            var lineWrapping = editor.editor().getOption('lineWrapping');
            editor.editor().setOption('lineWrapping', !lineWrapping);
            editor.rightOriginal().setOption('lineWrapping', !lineWrapping);
        });

        $('#save').click(function () {
            var confContent = editor.editor().getValue();
            $.post('./api/save', { content: confContent, name: "config.sh" }, function (data) {
                let icon = (data.err == 0) ? "success" : "error"
                    Swal.fire({
                        title:data.title,
                        text: data.msg,
                        icon: icon
                    }).then((result) => {
                        window.location.reload(true);
                    })
            });
        });
    </script>
</body>

</html>
